<template>
  <div class="person">
    <h2>一辆车：{{ car.brand }} {{ car.model }} 价值：{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <button @click="changeCar">修改汽车</button>
    <hr />
    <h2>当前求和：{{ sum }}</h2>
    <button @click="changeSum">点我sum加1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, reactive } from 'vue'

// 数据
let car = reactive({
  brand: 'Toyota',
  model: 'Camry',
  price: 100
})
let sum = ref(0);

// 方法
function changePrice() {
  car.price += 10
}
function changeSum() {
  sum.value += 1
}
function changeCar() {
  // car = {brand: 'Tesla', model: 'Model S', price: 200} // 这么写页面是不更新的
  // car = reactive({brand: 'Tesla', model: 'Model S', price: 200}) // 不行 // 这么写页面是不更新的
  Object.assign(car, {brand: 'Tesla', model: 'Model S', price: 200}) // 后面的属性加到car里，覆盖里面的属性
  // 用ref()定义，下面的可以
  // car.value = {brand: 'Tesla', model: 'Model S', price: 200} // 这么写页面是更新的

  // 基本类型用ref; 对象类型(层级浅)reactive、ref; 对象类型(层级深)用reactive + Object.assign;
}

</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px
}

button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>